<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <link href="../../css/style.css" rel="stylesheet" type="text/css" />
    <!--axios-->
    <script type="text/javascript" src="../../js/axios.js"></script>
    <script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../../js/api.js"></script>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <script type="text/javascript" src="../../layui/layui.js"></script>
<script>
$(function () {
    $("#uid").val(localStorage.getItem("uId"))
    $("#username").val(localStorage.getItem("username"))
    var time = dateFormat("yyyy-MM-dd hh:mm:ss", new Date())
    var time1 = new Date()
    var ordersId = "DJ" + time1.getFullYear() + "" + (time1.getMonth() + 1) + "" + time1.getDate() + parseInt((Math.random() * 9999) + 1000) + ''
    $("#ordersId").val(ordersId)
    $("#ordersTime").val(time)

    function dateFormat(format, date) {
        if (!format) return '';
        date = date || new Date();
        let dateMap = {
            y: date.getFullYear(),
            M: date.getMonth() + 1,
            d: date.getDate(),
            h: date.getHours(),
            m: date.getMinutes(),
            s: date.getSeconds(),
            S: date.getMilliseconds()
        };
        return format.replace(/(y+)|(M+)|(d+)|(h+)|(m+)|(s+)|(S+)/g, (a) => _add0(dateMap[a[0]], a.length))
    }

    function _add0(time, len) {
        time = time.toString();
        let l = time.length;
        return l < len ? '0'.repeat(len - l) + time : time;
    }

    load(countid)
    layui.use(['element','form'], function() {
        var form = layui.form;
    var url = "http://121.37.227.40:8000/"
    axios({
        url: url + 'marketing/queryCustom',
        method: "POST",
        data: {},
        params: {},
        dataType: "JSON"
    }).then(function (rel) {
        rel = rel.data;
        console.log(rel)
        $.each(rel.resultData, function (key, val) {
            $('#name').append(new Option(val.customName, val.customId));
        });
        form.render()
    })
})
})
var countid=1;
function load(countid){
    var url="http://121.37.227.40:8000/"
    axios({
        url:url+'marketing/queryBrand',
        method:"POST",
        data:{
        },
        params:{
        },
        dataType:"JSON"
    }).then(function (rel){
        rel=rel.data;
        console.log(rel)
        let strs=
            '      \t<tr>\n' +
            '            <td>\n' +
            '                <input type="checkbox" name="fav" onclick="check2()">\n' +
            '            </td>\n' +
            '          <td><span id="xh">1</span></td>\n' +
            '          <td>\n' +
            '          \t<select id="'+countid+'-1"  onchange="bchange('+countid+')">\n' +
            '                <option value="0">请选择</option>\n' +
            '            </select>\n' +
            '          </td>\n' +
            '          <td>\n' +
            '          \t<select id="'+countid+'-2" onchange="tchange('+countid+')">\n' +
            '                <option value="0">请选择</option>\n' +
            '            </select>\n' +
            '          </td>\n' +
            '          <td>\n' +
            '          \t<select id="'+countid+'-3" onchange="pchange('+countid+')" name="productId" class="subVerify">\n' +
            '                <option value="0">请选择</option>\n' +
            '            </select>\n' +
            '          </td>\n' +
            '          <td>\n' +
            '              <input type="text"  value="" class="subVerify1" name="purchaseNum" oninput="getPrice(this),getTotal()" id="'+countid+'-4">\n' +
            '          </td>\n' +
            '          <td><span id="'+countid+'-5"></span></td>\n' +
            '          <td><input type="text" value="" name="proPrice" readonly="readonly" id="'+countid+'-6"/></td>\n' +
            '          <td><input  type="text" readonly="readonly" id="'+countid+'-7" class="price" name="proTotal" value=""></td>\n' +
            '        </tr>\n'
        $("#tbo").append(strs)
        var str='<option value="0">请选择</option>';
        for (var i=0;i<rel.resultData.length;i++){
            var data=rel.resultData[i]
            str+='<option value="'+data.brandId +'">'+ data.brandName +'</option>'
        }
        $("#"+countid+'-1').html(str);


        var xh=document.querySelectorAll("#xh");
        for (var i=0;i<xh.length;i++){
            xh[i].innerHTML=(i+1)
        }
    })


}
</script>
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>营销管理</li>
    <li>订购单管理</li>
    <li>添加</li>
  </ul>
</div>
<div class="formbody" >
  <div class="formtitle"><span>订购单信息</span></div>
  <ul class="forminfo">
    <li>
      <label>订单编号</label>
      <input name="" type="text" value="" readonly="readonly" class="roinput" id="ordersId"/>
      <i>自动生成不能编辑</i>
    </li>
    <li class=" layui-form">
      <label>客户姓名</label>
        <div class="layui-input-inline">
        <select name=""  id="name" lay-verify="required" lay-search=""></select>
        </div>
      <i>不能为空</i>
    </li>
    <li>
      <label>订购时间</label>
      <input name="" type="text" value="" readonly="readonly" class="roinput" id="ordersTime"/>
      <i>不能编辑</i>
    </li>
    <li>
      <label>创建人</label>
      <input name="" type="text" value="" readonly="readonly" class="roinput" id="username"/>
      <input name="" type="text" value="" readonly="readonly" class="roinput" id="uid" style="display: none"/>
      <i>不能编辑</i>
    </li>
    <li>
      <label>审核状态</label>
      <input type="text" value="未审核"   readonly="readonly" class="roinput" />
      <input name="" type="hidden" value="1" />
      <i>初始状态，不能编辑</i>
    </li>
    <li>
      <label>总金额</label>
      <input name="" type="text"  readonly="readonly" class="roinput" id="to"/>
       <i>自动运算，不能编辑</i>
    </li>
    <li>
      <input type="button" value="新增" class="smallbtn" onclick="add()"/>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <input type="button" value="删除" class="smallbtn" onclick="checkdel()"/>
       &nbsp;&nbsp;&nbsp;&nbsp;
      <input type="button" value="保存" class="smallbtn" onclick="suborders()"/>
       &nbsp;&nbsp;&nbsp;&nbsp;
      <input type="button" value="返回" class="smallbtn" onclick="window.location.href='orderList.html'"/>
    </li>
  </ul>
      <form id="addOrder">
  <table class="tablelist" id="tb">
      <thead>
        <tr>
            <th>
                <input name="fav"  type="checkbox" id="checkAll"
                       onclick="check1(this),check2()">全选
            </th>
          <th>序号</th>
          <th>品牌</th>
          <th>类型</th>
          <th>型号</th>
          <th>数量</th>
          <th>单位</th>
          <th>单价</th>
          <th>金额</th>
        </tr>
      </thead>
      <tbody id="tbo">
<!--      	<tr>-->
<!--            <td>-->
<!--                <input type="checkbox" name="fav" onclick="check2()">-->
<!--            </td>-->
<!--          <td><span id="xh">1</span></td>-->
<!--          <td>-->
<!--          	<select id="brand">-->
<!--            </select>-->
<!--          </td>-->
<!--          <td>-->
<!--          	<select id="type">-->
<!--                <option value="0">请选择</option>-->
<!--            </select>-->
<!--          </td>-->
<!--          <td>-->
<!--          	<select id="product">-->
<!--                <option value="0">请选择</option>-->
<!--            </select>-->
<!--          </td>-->
<!--          <td>-->
<!--              <input type="text"  value="1"  name="count" onchange="getPrice(this),getTotal()">-->
<!--          </td>-->
<!--          <td><span id="unit"></span></td>-->
<!--          <td><input type="text" value="" readonly="readonly" id="money"/></td>-->
<!--          <td><span id="price"></span></td>-->
<!--        </tr>-->
      </tbody>
  </table>
      </form>
</div>

<script type="text/javascript">
	$('.tablelist tbody tr:odd').addClass('odd');
</script>
</body>
<script>

    var checkNodes = document.getElementsByName("fav");
    var sum=0;
    function check1(obj){
        var flag = obj.checked;
        for (var i in checkNodes) {
            checkNodes[i].checked=flag;
        }
    }
    function check2() {
        var flag = true;
        for (var i = 1; i < checkNodes.length; i++) {
            if (!checkNodes[i].checked) {
                flag = false;
                break;
            }
        }
        checkNodes[0].checked=flag;
    }
    function getPrice(obj){
        // var v1=obj.parentNode.previousElementSibling.firstElementChild.value;
        var v1= obj.parentNode.nextElementSibling.nextElementSibling.firstElementChild.value;
        var v2=obj.value;
        var price =v1*v2;
        obj.parentNode.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild.value=price;
    }
    function add(){
        countid++;
        load(countid)

    }

    function checkdel(){
        for (var i=1;i<checkNodes.length;i++){
            if (checkNodes[i].checked){
                checkNodes[i].parentNode.parentNode.remove()
                i--;
            }else {
                continue;
            }
        }
        var xh=document.querySelectorAll("#xh");
        for (var i=0;i<xh.length;i++){
            xh[i].innerHTML=(i+1)
        }
    }
    function getTotal(){
        sum=document.querySelectorAll(".price");
        var total=0;
        var totals=0;
        for (var i=0;i<sum.length;i++){
            total+=Number(sum[i].value)
        }
        totals=Number(total)
        $("#to").val(totals)
    }

    function bchange(countid) {
        $("#"+countid+'-6').val("")
        $("#"+countid+'-7').empty()
        $("#to").val("")
        $("#"+countid+'-4').val("")
        $("#"+countid+'-2').val("0")
        $("#"+countid+'-3').val("0")
        $("#"+countid+'-5').empty()
        var id=countid+'-2'
        var s= document.getElementById(`${id}`)
        remove1(s)
        var brandId=$("#"+countid+'-1').val()
        var url="http://121.37.227.40:8000/"
        axios({
            url:url+'marketing/queryType',
            method:"POST",
            data:{
            },
            params:{
                brandId:brandId
            },
            dataType:"JSON"
        }).then(function (rel){
            rel=rel.data;
            var str='<option value="0">请选择</option>'
            for (var i=0;i<rel.resultData.length;i++){
                var data=rel.resultData[i]
                str+='<option value="'+data.typeId +'">'+ data.typeName +'</option>'
            }
            $("#"+countid+'-2').html(str)
        })
    }

    function tchange(countid) {
        $("#"+countid+'-6').val("")
        $("#"+countid+'-7').empty()
        $("#to").val("")
        $("#"+countid+'-4').val("")
        $("#"+countid+'-3').val("0")
        $("#"+countid+'-5').empty()
        var s= document.getElementById(countid+'-3')
        remove1(s)
        var typeId=$("#"+countid+'-2').val()
        var url="http://121.37.227.40:8000/"
        axios({
            url:url+'marketing/queryProduct',
            method:"POST",
            data:{
            },
            params:{
                typeId:typeId
            },
            dataType:"JSON"
        }).then(function (rel){
            rel=rel.data;
            console.log(rel)
            var str='<option value="0">请选择</option>'
            for (var i=0;i<rel.resultData.length;i++){
                var data=rel.resultData[i]
                str+='<option value="'+data.productId +'">'+ data.productModel +'</option>'
            }
            $("#"+countid+'-3').html(str)
        })
    }

    function pchange(countid) {
        $("#"+countid+'-6').val("")
        $("#"+countid+'-7').empty()
        $("#to").val("")
        $("#"+countid+'-4').val("")
        $("#"+countid+'-5').empty()
        var productId=$("#"+countid+'-3').val()
        if (productId!=0){
            var url="http://121.37.227.40:8000/"
            axios({
                url:url+'marketing/queryProductDetail',
                method:"POST",
                data:{
                },
                params:{
                    productId:productId
                },
                dataType:"JSON"
            }).then(function (rel){
                rel=rel.data;
                console.log(rel)
                $("#"+countid+'-5').html(rel.resultData[0].productUnit)
                $("#"+countid+'-6').val(rel.resultData[0].productPrice)
            })
        }
    }

    function remove1(s) {
        var options = s.getElementsByTagName("option");
        for(var i = 0; i < options.length; i++) {
            s.removeChild(options[i]);
            i--;
        }
    }
    
    function suborders() {
        var s1=document.querySelectorAll(".subVerify")
        var s2= document.querySelectorAll(".subVerify1")
        var flag=true;
        for (var i=0;i<s1.length;i++){
            if (s1[i].value==0){
                flag=false
            }
        }
        for (var i=0;i<s2.length;i++){
            if (s2[i].value==0||s2[i].value==null){
                flag=false
            }
        }
        if (flag){
        var ordersid=$("#ordersId").val()
        var ordersTime=$("#ordersTime").val()
        var name=$("#name").val()
        var uid=$("#uid").val()
        var total=$("#to").val()
        var url="http://121.37.227.40:8000/"
        axios({
            url:url+'marketing/addOrder',
            method:"POST",
            data:{
            },
            params:{
                orderId:ordersid,
                customId:name,
                orderTime:ordersTime,
                orderMoney:total,
                operatorId:uid
            },
            dataType:"JSON"
        }).then(()=>{
            var orderId=$("#ordersId").val()
            var data=$("#addOrder").serialize()
            data+= "&orderId="+orderId;
            console.log(data)
            axios({
                method: "post",
                url: 'http://121.37.227.40:8000/marketing/addOrderDetail',
                data
            }).then(function (){
                window.location.href='orderList.html'
            })
        })
        }else {
            layer.msg('请填写完整', {icon: 5});
        }
    }
</script>
</html>
